import React from 'react';
import {  Modal, Table } from 'antd';

const dataSource = [{
    key: '1',
    name: '胡彦斌',
    age: 32,
    address: '西湖区湖底公园1号'
  }, {
    key: '2',
    name: '胡彦祖',
    age: 42,
    address: '西湖区湖底公园1号'
  }];
  
  const columns = [{
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  }, {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
  }, {
    title: '住址',
    dataIndex: 'address',
    key: 'address',
  }];
  
// 弹窗
class ViewOrderRecordModal extends React.Component {
    state = { visible: false }
  
    showModal = () => {
      this.setState({
        visible: true,
      });
    }
  
    handleOk = (e) => {
      console.log(e);
      this.setState({
        visible: false,
      });
    }
  
    handleCancel = (e) => {
      console.log(e);
      this.setState({
        visible: false,
      });
    }
  
    render() {
      return (
        <div>
          <a href="javascript:;" onClick={this.showModal}>
            查看订单记录
          </a>
          <Modal
            centered
            title="订单记录"
            visible={this.state.visible}
            onOk={this.handleOk}
            onCancel={this.handleCancel}
            footer={null} //关闭底部按钮
            width={700}
          >
             <Table dataSource={dataSource} columns={columns} />
          </Modal>
        </div>
      );
    }
}
  


export {ViewOrderRecordModal};